<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="政策优势" v-bind="formItemLayout">
      <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
          v-if="optType === 2"
          v-model="policy"
          ref="myQuillEditor"
          :options="editorOption"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <div v-else v-html="policyStr" class="ql-editor">
          {{ policyStr }}
        </div>
      </div>
    </a-form-item>
    <a-form-item label="题材优势" v-bind="formItemLayout">
      <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
          v-if="optType === 2"
          v-model="theme"
          ref="myQuillEditor"
          :options="editorOption"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <div v-else v-html="themeStr" class="ql-editor">
          {{ themeStr }}
        </div>
      </div>
    </a-form-item>
    <a-form-item label="市场优势" v-bind="formItemLayout">
      <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
          v-if="optType === 2"
          v-model="market"
          ref="myQuillEditor"
          :options="editorOption"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <div v-else v-html="marketStr" class="ql-editor">
          {{ marketStr }}
        </div>
      </div>
    </a-form-item>
    <a-form-item label="相关案例" v-bind="formItemLayout">
      <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
          v-if="optType === 2"
          v-model="cases"
          ref="myQuillEditor"
          :options="editorOption"
        >
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <div v-else v-html="casesStr" class="ql-editor">
          {{ casesStr }}
        </div>
      </div>
    </a-form-item>
    <a-row>
      <a-col :span="24" :style="{ textAlign: 'center' }">
        <a-button type="primary" html-type="submit">
          提交
        </a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
          重置
        </a-button>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "add",
  components: {
    quillEditor
  },
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this),
      previewVisible: false,
      fileList: [],
      previewImage: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: [
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }] //对齐方式
          ]
        }
      },
      policy: "",
      policyStr: "",
      theme: "",
      themeStr: "",
      market: "",
      marketStr: "",
      cases: "",
      casesStr: "",
      optType: 2
    };
  },
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.$ajax
        .post(this.$api.editProjectInfo, {
          id: this.$route.params.id,
          policy: this.policy,
          theme: this.theme,
          market: this.market,
          case: this.cases,
          type: 3
        })
        .then(() => {
          this.$notification.success({
            message: "操作项目分析成功"
          });
          if (this.optType === 1) {
            this.$router.push({ name: "projectList" });
          }
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    change(info) {
      if (info.file.status !== "uploading") {
        this.$message.info(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
    getInfo() {
      this.$ajax
        .get(this.$api.detailProjectBaseInfo, {
          id: this.$route.params.id
        })
        .then(res => {
          this.policy = res.policy;
          this.theme = res.theme;
          this.market = res.market;
          this.cases = res.case;
          this.policyStr = this.escapeStringHTML(res.policy);
          this.themeStr = this.escapeStringHTML(res.theme);
          this.marketStr = this.escapeStringHTML(res.market);
          this.casesStr = this.escapeStringHTML(res.case);
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  mounted() {
    if (this.$route.name === "editProject") {
      this.optType = 2;
    } else if (this.$route.name === "detailsProject") {
      this.optType = 3;
    }
    this.getInfo();
  }
};
</script>

<style scoped></style>
